<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav kui-flex-row-none">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>分类列表</BreadcrumbItem>
      </Breadcrumb>
      <div class="kui-desk-act">
        <Button class="kui-act-btn" v-show=" this.$store.state.userInfo.rid === 1 " type="primary" size="small" ><router-link :to="`/system/classify/add`">新增</router-link></Button>
      </div>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd kui-table-panel">
            <div class="kui-table-hd kui-flex kui-flex-between kui-flex-middle">
              <Button class="kui-hd-btn" type="error" size="small" @click="allDelete">删除所选数据</Button>
            </div>
            <Table class="kui-table-bd" highlight-row ref="currentRowTable" 
                  :columns="columns" :data="listData" :loading="loadPage" 
                  @on-selection-change="clickSelect"></Table>
            <Page class="kui-table-ft" v-if="pageTotal" size="small"
            :total="pageTotal" :page-size="20" @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '编号',
          key: 'id',
          width: 100,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          width: 140,
          align: 'center'
        },
        {
          title: '备注',
          key: 'info',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.amendBtn(params.row)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removedBtn([params.row.id])
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      listData: [],
      formData: null,
      pageTotal: null,
      curPage: 1,
      loadPage: true,
      roleInfo: {},
      selectedArr: []
    }
  },
  methods: {
    //获取数据
    async getlistData(page) {
      const app = this
      let { data } = await app.$axios.get('/master/v1/cate', {
        params: { 
          page,
          type: '1'
        }
      })
      if (data.code === 100) {
        this.loadPage = false
        this.listData = data.result.data
        this.pageTotal = data.result.total
      }
    },
    //全部删除弹出框
    allDelete() {
      const app = this
      if (app.selectedArr.length !== 0) {
          app.$Modal.confirm({
            title: '确认删除',
            content: '你正在批量删除，是否继续？',
            onOk: () => {
              
              app.removeData(app.selectedArr)
            }
          })
        } else {
          app.$Message.error('请选择操作对象！')
        }
    },
    //删除弹出框
    removedBtn(ids) {
      const app = this
      app.$Modal.confirm({
        title: '确认删除',
        content: '您确认删除么？',
        okText: '删除',
        loading: true,
        onOk: () => {
         app.removeData(ids)
         app.$Modal.remove()
        }
        
      })
    },
    //删除数据
    async removeData(ids) {
      const app = this
      let { data } = await app.$axios.delete('/master/v1/del/cate', {
        data: { ids }
      })
      if (data.code === 100) {
        this.loadPage = false
        app.$Message.success('删除成功')
        app.getlistData(app.curPage)
      } else {
        app.$Message.error(data.msg)
        app.$Modal.remove()
      }
    },
    //修改弹出框
    amendBtn(lis) {
      const app = this
      app.formData = {...lis}
      app.$Modal.confirm({
        title: '修改广告位资料',
        render: h => {
          return h(
            'div',
            {
              attrs: {
                class: 'kui-form-panel',
                style: 'padding-top: 24px;'
              }
            },
            [
              h(
                'Form',
                {
                  props: {
                    model: app.formData,
                    labelWidth: 80,
                    labelPosition: 'left'
                  }
                },
                [h(
                    'FormItem',
                    {
                      props: {
                        label: '名称'
                      }
                    },
                    [
                      h('Input', {
                        props: {
                          value: app.formData.name
                        },
                        on: {
                          input: val => {
                            app.formData.name = String(val)
                          }
                        }
                      })
                    ]
                  ),
                  h('FormItem', {
                  props: {
                    label: '类型'
                  }
                  }, [
                    h('Select', {
                      props: {
                        value: 1
                      },
                      on: {
                        'on-change': val => {
                          app.app.formData.type = Number(val)
                        }
                      }
                    },[
                      h('Option',{  
                            props: {  
                                value: 1  
                            }  
                        },'分类'), 
                        h('Option',{  
                            props: {  
                                value: 2  
                            }  
                        },'区域'), 
                    ])
                  ]),
                  ,
                  h(
                    'FormItem',
                    {
                      props: {
                        label: '备注'
                      }
                    },
                    [
                      h('Input', {
                        props: {
                          value: app.formData.info
                        },
                        on: {
                          input: val => {
                            app.formData.info = String(val)
                          }
                        }
                      })
                    ]
                  )
                ]
              )
            ]
          )
        },
        okText: '保存',
        loading: true,
        onOk: () => {
         app.amendData(lis.id,app.formData)
         app.$Modal.remove()
        }
      })
    },
    //修改数据
    async amendData(id,datas) {
      const app = this
      let { data } = await app.$axios.put(`/master/v1/cate/${id}`, datas)
      if (data.code === 100) {
        this.loadPage = false
        app.$Message.success('修改成功')
        app.$router.go('/system/classify')
      } else {
        app.$Message.error(data.msg)
        app.$Modal.remove()
      }
    },
    //翻页
    changePage(page) {
      const app = this
      app.loadPage = false
      app.getlistData(page)
    },
    //获取选中数据
    clickSelect(row) {
      this.selectedArr = row.map(item => {
        return item.id
      })
    },
  },

  created() {
    this.getlistData(this.curPage)
  }
}
</script>

<style scoped lang='less'>
a {
  color: #fff;
}
</style>
